<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 800px;
        }
    </style>
    <script src="./js/vue.js"></script>
    <script>
        Vue.config.keyCodes = {
            itany: 65,
        }
    </script>
</head>
<body>
    <div id="app">
        <!-- 
        按键修饰符：通过对电脑外设的按键进行监听控制操作，完成回调触发限制
            - .keyCode|.keyAlias 对js键盘事件而言，事件源对象($event)必然存在两个特殊取值 keyCode key
                    !! vue 1.0 默认是完成了别名修饰符的定义的
                    !! vue 2.0 别名被删除，如果需要使用别名方式必须全局自定义别名 Vue.config.keyCodes
                    !! vue.2.4 恢复的别名定义

            - 键盘修饰符连写使用或者关系
        -->
        <input type="text" @keyup="printCode($event)"><br>
        <input type="text" @keyup.65="printCode($event)"><br>
        <input type="text" @keyup.a="printCode($event)"><br>
        <input type="text" @keyup.itany="printCode($event)"><br>
        <hr>
        <input type="text" @keyup.a.b.c="printCode($event)"><br>
        <hr>
        <!--
        系统修饰符：监听外设键盘的上的特殊系统功能按键的状态
            - .ctrl 描述ctrl被激活时触发事件
            - .alt 描述alt被激活时触发事件
            - .shift 描述shift被激活时触发事件
            - .meta 描述meta被激活时触发事件

        系统修饰符采用并且关系,实际开发配合按键修饰符使用
        -->
        <input type="text" @keyup.ctrl.a="printCode($event)"><br>
        <input type="text" @keyup.ctrl.a.b="printCode($event)"><br>
        <!-- 同时激活 ctrl+shift 输入a键 触发事件  -->
        <input type="text" @keyup.ctrl.shift.a="printCode($event)"><br>
        <input type="text" @keyup.ctrl.shift.a.b="printCode($event)"><br>
        <hr>
        <!-- 
            .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
        -->
        <input type="text" @keyup.ctrl.a="printCode($event)"><br>
        <input type="text" @keyup.ctrl.a.exact="printCode($event)"><br>
        <!-- 
        - 动态事件绑定(2.6+) - 将事件名转 vue 数据仓库的变量 - [仓库变量]语法中不能使用驼峰变量
        - 语法：
            <标签 v-on:[仓库变量]="回调函数|表达式" ></标签>
            <标签 @[仓库变量]="回调函数|表达式" ></标签>
        -->
        <p>info:{{ info }}</p>
        <input type="text" @[eventname]=" info=$event.target.value "><br>
        <input type="button" value="响应模式切换" @click=" eventname = eventname=='input'?'change':'input' ">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            info:"测试变量",
            eventname:"input"
        },
        methods:{
            printCode(e){
                console.log(e);
            }
        }
    })
</script>
</html>